<!DOCTYPE html>
<html lang="en">
<head>

  <meta charset="utf-8">
  <meta name="keywords" content="bootstrap 4, premium, multipurpose, ecommerce, html5, CSS" />
  <meta name="description" content="Bootstrap 4 Landing Page Template" />
  <meta name="author" content="www.themesground.com" />
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <title>佩奇牧场</title>

  <link rel="shortcut icon" href="/images/pagepig.ico" />

  <link href="/css/theme-plugin.css" rel="stylesheet" />
  <link href="/css/theme.min.css" rel="stylesheet" />
  <link href="/css/bootstrap.min.css" rel="stylesheet">
</head>

<body>
<div class="page-wrapper">
  <div id="ht-preloader">
    <div class="loader clear-loader"> <img class="img-fluid" src="/images/loader.gif" alt=""> </div>
  </div>

  <header class="site-header header-1">
    <div id="header-wrap">
      <div class="container">
        <div class="row">
          <!--menu start-->
          <div class="col">
            <nav class="navbar navbar-expand-lg navbar-light position-static">
              <a style="width: 64px;height: 64px;" href="index.html"> <img class="img-fluid" src="/images/pplogo.png" alt=""> </a>
              <a class="navbar-brand logo" href="index.html"> <img class="img-fluid" src="/images/logo001.png" alt=""> </a>
              <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button>
              <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav ml-auto mr-auto">
                  <li class="nav-item dropdown position-static"> <a class="nav-link dropdown-toggle" href="#" style="color: red;">猪肉分类</a>
                    <div class="dropdown-menu w-100">
                      <!-- Tabs -->
                      <div class="container p-0">
                        <div class="row w-100 no-gutters">
                          <div class="col-lg-8 p-lg-3">
                            <div class="row">
                              <div class="col-12 col-md-3 col-sm-6">
                                <div class="mb-2 font-w-5 text-link">300天喂养</div>
                                <!-- Links -->
                                <ul class="list-unstyled mb-6 mb-md-0">
                                  <li> <a href="#">Caps &amp; Hats</a> </li>
                                  <li> <a href="#">Gloves &amp; Arm Warmers</a></li>
                                  <li> <a href="#">测试</a></li>
                                  <li> <a href="#">测试</a></li>
                                </ul>
                              </div>
                              <div class="col-12 col-md-3 col-sm-6">
                                <!-- Heading -->
                                <div class="mb-2 font-w-5 text-link">特色黑猪</div>
                                <!-- Links -->
                                <ul class="list-unstyled mb-6 mb-md-0">
                                  <li> <a href="#">测试</a> </li>
                                  <li> <a href="#">Chains &amp; Necklaces</a></li>
                                  <li> <a href="#">Bangles &amp; Bracelets</a></li>
                                  <li> <a href="#">测试</a></li>
                                  <li> <a href="#">测试</a></li>
                                </ul>
                              </div>
                              <div class="col-12 col-md-3 col-sm-6">
                                <!-- Heading -->
                                <div class="mb-2 font-w-5 text-link">熟食腊味</div>
                                <!-- Links -->
                                <ul class="list-unstyled mb-0">
                                  <li> <a href="#">Running Shoes</a> </li>
                                  <li> <a href="#">测试</a></li>
                                  <li> <a href="#">Loafers &amp; Moccasins</a></li>
                                  <li> <a href="#">Boots</a></li>
                                  <li> <a href="#">Formal Shoes</a></li>
                                </ul>
                              </div>
                            </div>
                          </div>
                          <div class="col-lg-4 d-none d-lg-block pr-2"> <a href="#"><img class="img-fluid rounded-bottom rounded-top" src="/images/header-img.jpg" alt="..."></a> </div>
                        </div>
                      </div>
                    </div>
                  </li>
                  <li class="nav-item "> <a class="nav-link" href="about-us.html" data-toggle="dropdown">农场养殖</a>

                  </li>
                  <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" onclick="doLoadUrl('/page/itemList')" data-toggle="dropdown">商城</a>
                    <ul class="dropdown-menu">

                    </ul>
                  </li>
                  <li> <a class="nav-link" href="#" >特色菜谱</a>
                  </li>
                  <li class="nav-item"> <a class="nav-link" href="about-us.html">关于我们</a> </li>
                </ul>
              </div>
              <div class="right-nav align-items-center d-flex justify-content-end">
                <a href="login.html" >现在登录 &nbsp;</a>|
                <a href="signup.html" style="color: #000000;">&nbsp;注册</a>
                <div class="mr-1 mr-sm-3 search-block"> <a href="javascript:void(0);" class="search_trigger ml-3"><i class="las la-search"></i></a>
                  <div class="search_wrap container"> <span class="close-search"><i class="ion-ios-close-empty"></i></span>
                    <form>
                      <input style="color: #000000;" type="text" placeholder="Search" class="form-control" id="search_input">
                      <button type="submit" class="search_icon"><i class="las la-search"></i></button>
                    </form>
                  </div>
                </div>
                <a class="mr-1 mr-sm-3" href="my-account.html"><i class="las la-user-alt"></i></a>
                <div class="dropdown cart_dropdown"> <a class="d-flex align-items-center" href="#"> <span class="bg-white pr-2 pl-0 py-1 rounded" data-cart-items="2"> <i class="las la-shopping-bag"></i> </span> </a>
                  <div class="cart_box dropdown-menu dropdown-menu-right">
                    <ul class="cart_list">

                    </ul>
                    <!-- 购物车提交 -->
                    <div class="cart_footer">
                      <p class="cart_total"><strong>总金额:</strong> <span class="cart_price"> <span class="price_symbole">$</span></span>150.00</p>
                      <p class="cart_buttons" ><a href="shopping-cart.html" class="btn btn-secondary view-cart ml-2 mr-2">查看购物车</a><a href="localhost:8091/alipay" class="btn btn-primary ml-2 mr-2 checkout" onclick="itempay()">付款</a></p>
                    </div>
                  </div>
                </div>
              </div>
            </nav>
          </div>
          <!--menu end-->
        </div>
      </div>
    </div>
  </header>


  <div class="page-content">
    <section>
      <div class="container">
        <div class="row">
          <div class="col-lg-6 col-12">
            <ul id="imageGallery">
              <li data-thumb="/images/goods/五花肉/五花肉01.jpg" data-src="/images/product/p11.jpg">
                <img class="img-fluid w-100" src="/images/goods/五花肉/五花肉01.jpg" alt=""/>
              </li>
            </ul>
          </div>
          <div class="col-lg-6 col-12 mt-5 mt-lg-0">
            <div class="product-details">
              <h1 class="h4 mb-0 font-w-6 title" >商品名字</h1>
              <input type="hidden" th:value="${goodsId}" id="hiddenId">
              <div class="star-rating mb-4" ><i class="las la-star"></i><i class="las la-star"></i><i
                      class="las la-star"></i><i class="las la-star"></i><i class="las la-star"></i>
              </div>
              <span class="product-price h5 text-pink " id = "price"></span>
              <ul class="list-unstyled my-3">
                <li><small>库存：<span class="text-green" id = "num"></span> </small>
                </li>
                <li class="font-w-4"><small>类型：<span class="text-muted variety"></span></small>
                </li>
              </ul>
              <div class="d-sm-flex align-items-center mb-5">
                <div class="d-flex align-items-center mr-sm-4">
                  <button class="btn-product btn-product-up"><i class="las la-minus"></i>
                  </button>
                  <!--这里是选择的商品个数-->
                  <input class="form-product" type="number" name="form-product" value="1">
                  <button class="btn-product btn-product-down"><i class="las la-plus"></i>
                  </button>
                </div>
              </div>
            </div>
            <div class="d-sm-flex align-items-center mt-5">
              <button class="btn btn-primary btn-animated mr-sm-3 mb-3 mb-sm-0"><i class="las la-shopping-cart mr-2"></i>添加购物车
              </button>
              <a class="btn btn-animated btn-dark" href="#"> <i class="lar la-heart mr-2 ic-1-2x"></i>添加到愿望单
              </a>
            </div>
          </div>
        </div>
      </div>
  </section>
  <section class="pt-0 pb-8">
    <div class="container">
      <div class="row">
        <div class="col-md-12">
          <div class="tab product-tab">
            <nav>
              <div class="nav nav-tabs" id="nav-tab" role="tablist">
                <a class="nav-item nav-link active ml-0" id="nav-tab1" data-toggle="tab" href="#tab3-1" role="tab" aria-selected="true">商品详细介绍</a>
                <a class="nav-item nav-link" id="nav-tab2" data-toggle="tab" href="#tab3-2" role="tab"
                   aria-selected="false">商品详情</a>
              </div>
            </nav>
            <div class="tab-content pt-5 p-0">
              <div role="tabpanel" class="tab-pane fade show active" id="tab3-1">
                <div class="row align-items-center">
                  <!--商品描述div，使用append往内添加内容-->
                  <div class="col-md-12" id="des">

                  </div>
                </div>
              </div>
              <div role="tabpanel" class="tab-pane fade" id="tab3-2">
                <table class="table table-bordered mb-0">
                  <tbody>
                  <tr>
                    <td>商品名称</td>
                    <td class ="title">跑山猪400g/袋</td>
                  </tr>
                  <tr>
                    <td>商品编号</td>
                    <td id = "id">100004383387</td>
                  </tr>
                  <tr>
                    <td>商品毛重</td>
                    <td id="weight">450.0g</td>
                  </tr>
                  <tr>
                    <td>商品产地</td>
                    <td id="origin">中国广东珠海</td>
                  </tr>
                  <tr>
                    <td>品种</td>
                    <td class="variety">黑猪</td>
                  </tr>
                  <tr>
                    <td>类别</td>
                    <td id="categoryName">猪里脊</td>
                  </tr>
                  <tr>
                    <td>保质期</td>
                    <td id="storage">365天</td>
                  </tr>
                  <tr>
                    <td>储存条件</td>
                    <td id="storageFactor">深冷、冷冻 -18℃</td>
                  </tr>
                  </tbody>
                </table>
              </div>

              <div class="comment-area mt-5">
                <div class="content_title">
                  <h4>评论</h4>
                </div>
                <!--评论显示的位置-->
                <ul class="list_none comment_list" id="commentUl">

                </ul>
                <div class="mt-8 bg-light-4 rounded p-5">
                  <div class="section-title mb-3">
                    <h4>添加评论</h4>
                  </div>
                  <div id="contact-form" class="row">
                    <div class="form-group col-12">
                    <textarea id="form_message" name="message" class="form-control" placeholder="请让我知道您的反馈" rows="4"></textarea>
                      <div class="help-block with-errors" id="errorMSG"></div>
                    </div>
                    <div class="col-12">
                      <button class="btn btn-primary btn-animated mt-1" onclick="insertComment()">填写评论</button>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
</section>
</div>
</div>

<div class="scroll-top"><a class="smoothscroll" href="#top"><i class="las la-angle-up"></i></a></div>
<script src="/js/jquery-3.5.1.min.js"></script> <script src="/js/popper.min.js"></script>
<script src="/js/bootstrap.min.js"></script>
<script src="/js/owl.carousel.min.js"></script>
<script src="/js/light-slider.js"></script>
<script src="/js/parallax.js"></script>
<script src="/js/magnific-popup.min.js"></script>
<script src="/js/jquery.countdown.min.js"></script>
<script src="/js/jquery.dd.min.js"></script>
<script src="/js/validator.js"></script>
<script src="/js/wow.js"></script>
<script src="/js/theme-script.js"></script>
  </body>
<script>
  $(function(){
    getFindGoods($("#hiddenId").val());
  });

  function getFindGoods(goodsId) {
    $.ajax({
      url:"/goods/doFindGoodById",
      data:{
        "goodsId":goodsId
      },
      async:false,
      success:(result)=>{
        let data =result.data[0];
        console.log(data);
        //回填商品数据
        setDataToPage(data);
        getCommentData(data.id);
        getImg(data.img);
      }
    })
  }


  function getImg(dataImg) {
    let imgArr = dataImg.split(",");
    let imgUI = $("#imageGallery");
    for (img of imgArr) {
        let str = "<li data-thumb='"+img+"' data-src='"+img+"'>" +
                "<img class='img-fluid w-100' src='"+img+"'></li>";
      imgUI.append(str);
    }
  }
  /**
   * 获取当前商品下的评论信息
   */
  function getCommentData(goodsId){
      $.getJSON({
        url:"/comm/doFindComment",
        data:{
          "goodsId":goodsId,
          "pageCurrent":1
        },
        async:true,
        success:(result)=>{
          if (result.data != null) {
            setCommentData(result.data.goodsRecords);
          }
        }
      })
  }

  /**
   *  将当前商品下的所有评论显示
   * */
  function setCommentData(records) {
    for (let i = 0; i < records.length; i++) {
      let record = records[i];
      let date = new Date(record.createdTime);
      let str = "<li class='comment_info'><div class='d-flex'><div class='comment_user'>"+
            "<img src='/images/thumbnail/member1.png' alt='user2'></div>"+
            "<div class='comment_content'><div class='d-flex'><div class='meta_data'>"+
            "<h6><a href='#'>"+record.username+"</a></h6><div class='comment-time'>"+formatDate(date)+"</div>"+
            "</div></div>"+
            "<p>"+record.comm+"</p>"+
            "</div></div></li>";
      $("#commentUl").append(str);
    }
  }

  /**
   * 将商品的数据回填到页面中
   * @param data
   */
  function setDataToPage(data) {
    $(".title").html(data.title);
    $("#price").html(data.price);
    $("#num").html(data.num);
    $(".variety").html(data.variety);
    $("#des").empty().append("<p>" + data.des + "</p>");
    $("#id").html(data.id);
    $("#weight").html(data.weight+"g");
    $("#origin").html(data.origin);
    $("#categoryName").html(data.categoryName);
    $("#storage").html(data.storage);
    $("#storageFactor").html(data.storageFactor);
  }

  //将日期转换成纯数字日期
  function formatDate(time){
    let year = time.getFullYear();
    let month = time.getMonth() + 1 < 10 ? "0" + (time.getMonth() + 1) : (time.getMonth() + 1)
    let day = time.getDay();
    let hour = time.getHours();
    let min = time.getMinutes();
    return year + "-" + month+"-"+day+" "+hour+":"+min;
  }

  //添加评论js
  function insertComment() {
    let comm = $("#form_message").val();
    if (comm === undefined || comm === "") {
      alert("请填写评论！");
      return
    }
    let id = $("#id").html();
    console.log(id);
    $.ajax({
      url: "/comm/doSaveComment",
      type: "POST",
      data: {
        "goodsId": id,
        "comm": comm,
        //TODO 后面获取当前用户名
        "username": "测试"
      },
      success:(result)=>{
        //请求状态码不为-1则表示请求成功
        if (result.status !== -1) {
          alert(result.data);
          $("#form_message").empty();
          window.location.reload();
        }else{
          $("#errorMSG").html(result.message);
        }
      }
    })
  }
</script>
</html>
